<template>
  <div class="box">
    <header>
      <van-nav-bar
          title="查看个人信息"
          left-text="返回"
          right-text="保存"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
      />
    </header>
    <section>
      <div>
        <!-- 输入任意文本 -->
        <van-field v-model="userName" label="昵称" placeholder="请输入用户昵称" />
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field v-model="remark" label="个性签名" placeholder="请输入您的签名" />
<!--        <van-field v-model="value" label="性别" placeholder="请输入您的签名" />-->
        <van-field name="uploader" label="上传头像">
          <template #input>
            <img v-if="$store.state.loginObj.avatar == ''" style="width: 80px; height: 80px"
                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F94e3dd6d94e50367940678319958b7d091461d7cf69-dQTIhW_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131201&t=a37a6805622e2a57899e17081e106432"
                 alt="">
            <img :src="$store.state.loginObj.avatar" alt="" v-else>
            <van-uploader multiple :max-count="1" :after-read="afterRead" :max-size="1024 * 1024" @oversize="onOversize"></van-uploader>
          </template>
        </van-field>
      </div>
    </section>
  </div>
</template>

<script>
import {Toast} from "vant";
import {changeAvatar, changeupdate, getUserInfo} from "@/http/api";

export default {
  name: "Personupdate",
  data() {
    return {
      userName: '',
      remark: '',
      // number: '',
      //选择器
      // value: '',
      disabled: true,
      columns: ['男', '女'],
    };
  },
  methods: {
    //返回
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    onClickRight() {
      Toast('按钮');
      changeupdate(this.userName,this.value,this.remark).then(res=>{
        console.log(res)
        getUserInfo().then(res => {
          console.log(res)
          if (res.data.code == 0) {
            Toast.clear()
            this.$store.commit('getloginObj', res.data.data)
            Toast.success('修改成功');
            this.$router.go(-1)
          }
        })
      })
    },
    onOversize(file) {
      console.log(file);
      Toast('文件大小不能超过 1MB');
    },
    afterRead(file) {
      // console.log(file)
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });

      changeAvatar(file.file)
          .then(res => {
            console.log(res)
            getUserInfo().then(res => {
              // console.log(res)
              if (res.data.code == 0) {
                this.$store.commit('getloginObj', res.data.data)
                Toast.clear()
                Toast.success('上传成功');
              }
            })
          })
          .catch(err => {
            console.log(err)
            Toast.success('请求超时，请重新上传');
          })
    },
  },

  created() {
    this.userName = this.$store.state.loginObj.userName
    this.value = this.$store.state.loginObj.sex
    this.remark = this.$store.state.loginObj.remark
    getUserInfo().then(res => {
      // console.log(res)
      if (res.data.code == 0) {
        this.$store.commit('getloginObj', res.data.data)
      }
    })
  },
}
</script>

<style scoped lang="less">
.box {
  background-color: #efefef;

  section {
    padding: 5px 0;

    .van-cell, .van-field {
      margin: 2px 0;
    }
  }
}

img {
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
}
</style>